Style Master Quick Start

This page is the quickest way to get started with Style Master. If you want to get a fast overview of the process of working with style sheets using Style Master, read on. You can then fill in your knowledge of Style Master using our manual, and your knowledge of Style sheets using our hands on tutorial, and our style sheets guide.

An overview

Using Style Master to create style sheets and style your web site with them is very straightforward. You need to

  1. create a new style sheet (simply running the application does this for you, so step one is out of the way already!)
  2. create one or more statements, which are instructions for a web browser, explaining how elements like paragraphs should be drawn
  3. preview your style sheet in your browsers of choice
  4. link your web pages to the style sheet

Simple.

Read on, as we cover each of these steps in detail. In about 5 minutes you'll have your first style sheet up and running.

Creating a Style Sheet

Have you run Style Master already? If so, you've already completed this step. That's because when you run the application, it opens a new style sheet automatically. It should look a lot like this.

If you want to make new style sheets its easy.

1. choose New from the File menu

This will open a new, untitled style sheet window.

Creating Statements

A style sheet is really just a number of statements. Each statement tells a browser two things

  1. which elements on a web page are affected by this statement. This part of a statement is called a selector (because it selects elements on the page)
  2. what the affected elements should look like (their font, color and so on). These are called the properties of the statement.

To create a statement, you

  1. create the selector
  2. create the properties

Let's do each of these in turn

Creating the Selector

To create the selector

1. choose New Statement… from the Statement menu

The following dialog box opens:

2. for now, simply click Create

3. This opens the HTML element selector editor, which looks like this

In this case, we've chosen the P selector, which (as the editor will tell you) selects elements marked up as <P>.

4. choose the type of elements you want this statement to select, then click Create

5. the editor will close, and your style sheet window will look like this

We now have to create some properties to tell a browser how we want our paragraphs to appear.

Creating Properties

Style Master takes the hard work out of creating properties for your statements. It provides a series of editors for different kinds of properties. In this quickstart, we'll just look at the font properties, but the Style Master manual covers them all in detail.

To create properties for a statement

1. select the statement you want to give properties to in the list of Statements in the style sheet window (in the example above, the P statement is already selected

2. open the property editor or editors you want. To open an editor, choose the name of the editor you want to open from the Properties menu.

3. use the editor to create the properties. These appear in the style sheet window in the field labeled Properties

In this example we are going to work with the Text Style properties.

1. choose Text Style Editor from the Properties menu

2. the text style editor opens

3. now you simply enter the values you want, in the relevant fields. In this example, we've set the paragraph text to be 1.2ems

And that's all there is to it. Of course, you might need to spend a little time learning the ins and outs of the various properties, but that's why we have included our guide to style sheets. Or simply click one of the info buttons to the left of any property. This explains that property in user friendly but accurate terms.

Now we have created a statement, and given it a property, we simply need to preview it to make sure it looks right, then link our web page to this style sheet.

Previewing a Style Sheet

Previewing takes a moment or two to setup, but once it's done, with the click of a button you can preview any style sheet with your choice of web page using whichever browsers you need to.

Setting up previewing involves

  1. setting up the browsers you want to preview using
  2. setting up the documents you want to preview

To set up the preview browsers

1. choose Edit Preview Browser List... from the Preview menu (it's a submenu of the Preview in Browser menu item)

the Edit Browser List window opens

2. click Add Browser, then locate and select the browser you want to add to the list

3. click OK to close the window

The browsers that you have selected now appear in the Preview in Browser submenu of the Preview menu.

To set up the preview document or documents

1. choose Edit Preview Document List..., from the Preview Using Document... submenu of the Preview menu

the Edit Preview Document window opens

2. click Add Document, then locate and select the HTML document you want to add to the list

3. click OK to close the window

The documents that you have selected now appear in the Preview in Document submenu of the Preview menu

To preview using one of these documents

1. choose the name of the document you want to preview using in the Preview Using Document submenu of the Preview menu

Now we have set up the previewing, let's do it.

To preview a document in one or more browsers

1. choose the names of the browser or browsers you want to preview in from the Preview in Browser submenu of the Preview menu. This launches the browser if it is not already running

2. click the Preview button on the toolbar palette

Now we have previewed our style sheet, and are happy with the result, its time to link our web site to it.

Linking a Web Page to a Style Sheet

So that a browser can use our style sheet when it is drawing our web pages, we need to link any pages we want to use this style sheet to the style sheet. As you might expect, Style Master makes this simple.

You'll need to make sure that your style sheet is saved.

To save a style sheet

1. choose Save from the File menu

2. as you would for any other file, choose the location for saving the style sheet, and name it. Make sure that the name concludes with the important .css suffix. When naming style sheets remember the basic rules for naming files used in web sites.

Now we want to link some web pages to this style sheet.

To link a web page to a style sheet

1. choose Link Page... from the File menu

2. locate the HTML file you want to link to this style sheet

3. click Open

Your web page is now linked to this style sheet

And now you have a good understanding of the fundamentals of both style sheets and Style Master.

Where to now?

So now you have the basics under control, where to next? Because you had the good sense to download Style Master, everything you need is already on your computer (unless you've thrown it out).

To learn more about Style Master, take a look at our Style Master Manual. Everything you need to know about the application is in there.

And if you want to know more about style sheets, you can take a look at Everything you ever wanted to know about style, a complete guide to style sheets we've written for you. If you prefer, there is also a hands on tutorial to style sheet using Style Master.

All of these were part of the download that came with Style Master.

Thanks for downloading Style Master. We hope that the application, and the materials we've developed are useful. If so, we wouldn't mid at all if you purchased the application. Its only $29.00. For details on how to purchase, see Buying Style Master (its also on your computer).

Thanks again

John Allsopp,

Western Civilisation